<template>
  <div>
      <div>
        <el-form :inline="false">
          <el-form-item>
            <el-select v-model="repairHistoryDto.type" placeholder="请选择维修类型" @change="selectRepairType()">
              <el-option
                v-for="item1 in historyTypeOptions"
                :key="item1.id"
                :label="item1.name"
                :value="item1.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 批次内机器详细列表 -->
          <el-form-item style="overflow: auto;width: 100%">
              <custom-table
                :data="detailList"
                :columns="repairHistoryDto.type === 0? pointDetailColumns:factoryDetailColumns"
                :tableLoadingFlag="detailTableLoadingFlag"
                :operationColumn="detailOperationColumn">
              </custom-table>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>
<script>
  import { parseTime } from '@/utils'
  import CustomTable from '@/components/table/CustomTable'
  import { apiGetRepairHistory } from '@/api/stock/index'

  export default {
    name: 'repairList',
    props: {
      ystsn: {
        type: String,
        require: true
      }
    },
    components: {CustomTable},
    created () {
      this.selectRepairType()
    },
    data () {
      return {
        detailList: [],
        detailTableLoadingFlag: false,
        historyTypeOptions: [
          {
            'id': 0,
            'name': '网点维修'
          },
          {
            'id': 1,
            'name': '返厂维修'
          }
        ],
        repairHistoryDto: {
          type: 0,
          ystsn: this.ystsn
        },
        pointDetailColumns: [
          {label: '维修单号', name: 'code', align: 'center'},
          {label: '维修人', name: 'repairer', width: '160', align: 'center'},
          {label: '维修时间', name: 'repairTime', width: '180', align: 'center', formatter: this.formatTime},
          {label: '省份', name: 'province', width: '80', align: 'center'},
          {label: '地市', name: 'city', width: '80', align: 'center'}
        ],
        factoryDetailColumns: [
          {label: '批次号', name: 'code', align: 'center'},
          {label: '维修人', name: 'repairer', width: '160', align: 'center'},
          {label: '返厂时间', name: 'repairTime', width: '180', align: 'center', formatter: this.formatTime},
          {label: '省份', name: 'province', width: '80', align: 'center'},
          {label: '地市', name: 'city', width: '80', align: 'center'}
        ],
        detailOperationColumn: {
          width: '80',
          operations: [
            {name: '详情', callback: this.onBtnDetailRepair}
          ]
        }
      }
    },
    methods: {
      selectRepairType() {
        this.repairHistoryDto.ystsn = this.ystsn
        apiGetRepairHistory(this.repairHistoryDto).then(response => {
          this.detailList = response.data
          this.detailTableLoadingFlag = false
        }).catch(() => {
          this.detailTableLoadingFlag = false
        })
      },
      onBtnDetailRepair(row) {
        if (this.repairHistoryDto.type === 0) {
          this.$router.push({
            path: '/stock/good/repair/point/detail',
            query: {
              type: this.repairHistoryDto.type,
              id: row.id
            }
          })
        } else {
          this.$router.push({
            path: '/stock/good/repair/factory/detail',
            query: {
              type: this.repairHistoryDto.type,
              id: row.id
            }
          })
        }
        // TODO
      },
      formatTime(row, column, cellValue) {
        if (column.property === 'deadLine') {
          return parseTime(cellValue, '{y}-{m}-{d}')
        } else {
          return parseTime(cellValue)
        }
      }
    },
    watch: {
      ystsn: {
        handler(val, oldVal) {
          this.repairHistoryDto.type = 0
          this.selectRepairType()
        },
        deep: true
      }
    }
  }
</script>
